<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Lock, Phone, Message, Delete } from '@element-plus/icons-vue'

interface PasswordForm {
  oldPassword: string
  newPassword: string
  confirmPassword: string
}

interface PrivacySettings {
  showPhone: boolean
  showEmail: boolean
  receiveNotifications: boolean
  receivePromotions: boolean
}

const activeSection = ref<string>('password')

const passwordForm = ref<PasswordForm>({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const privacySettings = ref<PrivacySettings>({
  showPhone: false,
  showEmail: true,
  receiveNotifications: true,
  receivePromotions: false
})

const bindInfo = ref({
  phone: '138****5678',
  email: 'xiaoming@example.com',
  phoneVerified: true,
  emailVerified: true
})

const handleChangePassword = () => {
  if (!passwordForm.value.oldPassword || !passwordForm.value.newPassword || !passwordForm.value.confirmPassword) {
    ElMessage.warning('请填写完整的密码信息')
    return
  }
  if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
    ElMessage.error('两次输入的新密码不一致')
    return
  }
  if (passwordForm.value.newPassword.length < 6) {
    ElMessage.error('新密码长度不能少于6位')
    return
  }

  ElMessage.success('密码修改成功，请重新登录')
  passwordForm.value = {
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  }
}

const handleBindPhone = () => {
  ElMessage.info('打开手机绑定窗口')
}

const handleBindEmail = () => {
  ElMessage.info('打开邮箱绑定窗口')
}

const handleSavePrivacy = () => {
  ElMessage.success('隐私设置保存成功')
  console.log('隐私设置：', privacySettings.value)
}

const handleDeleteAccount = () => {
  ElMessageBox.confirm(
    '注销账户后，您的所有数据将被永久删除且无法恢复，确定要继续吗？',
    '危险操作',
    {
      confirmButtonText: '确定注销',
      cancelButtonText: '取消',
      type: 'error',
      confirmButtonClass: 'danger-confirm-button'
    }
  ).then(() => {
    ElMessage.error('账户注销功能暂未开放')
  }).catch(() => {
    // 用户取消操作
  })
}
</script>

<template>
  <div class="account-settings">
    <div class="settings-header">
      <h3 class="settings-title">账户设置</h3>
      <p class="settings-desc">管理您的账户安全和隐私设置</p>
    </div>

    <!-- 修改密码 -->
    <div class="settings-section">
      <div class="section-header">
        <el-icon :size="20" color="#4facfe">
          <Lock />
        </el-icon>
        <h4 class="section-title">修改密码</h4>
      </div>
      <div class="section-content">
        <el-form :model="passwordForm" label-width="100px" style="max-width: 500px">
          <el-form-item label="原密码">
            <el-input
              v-model="passwordForm.oldPassword"
              type="password"
              placeholder="请输入原密码"
              show-password
              clearable
            />
          </el-form-item>
          <el-form-item label="新密码">
            <el-input
              v-model="passwordForm.newPassword"
              type="password"
              placeholder="请输入新密码（至少6位）"
              show-password
              clearable
            />
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input
              v-model="passwordForm.confirmPassword"
              type="password"
              placeholder="请再次输入新密码"
              show-password
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleChangePassword">
              修改密码
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 绑定信息 -->
    <div class="settings-section">
      <div class="section-header">
        <el-icon :size="20" color="#4facfe">
          <Phone />
        </el-icon>
        <h4 class="section-title">绑定信息</h4>
      </div>
      <div class="section-content">
        <div class="bind-items">
          <div class="bind-item">
            <div class="bind-info">
              <div class="bind-label">手机号码</div>
              <div class="bind-value">
                {{ bindInfo.phone }}
                <el-tag v-if="bindInfo.phoneVerified" type="success" size="small">已验证</el-tag>
              </div>
            </div>
            <el-button size="default" plain @click="handleBindPhone">
              更换手机
            </el-button>
          </div>

          <div class="bind-item">
            <div class="bind-info">
              <div class="bind-label">邮箱地址</div>
              <div class="bind-value">
                {{ bindInfo.email }}
                <el-tag v-if="bindInfo.emailVerified" type="success" size="small">已验证</el-tag>
              </div>
            </div>
            <el-button size="default" plain @click="handleBindEmail">
              更换邮箱
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 隐私设置 -->
    <div class="settings-section">
      <div class="section-header">
        <el-icon :size="20" color="#4facfe">
          <Message />
        </el-icon>
        <h4 class="section-title">隐私设置</h4>
      </div>
      <div class="section-content">
        <div class="privacy-items">
          <div class="privacy-item">
            <div class="privacy-info">
              <div class="privacy-label">公开手机号码</div>
              <div class="privacy-desc">允许其他用户查看您的手机号码</div>
            </div>
            <el-switch v-model="privacySettings.showPhone" />
          </div>

          <div class="privacy-item">
            <div class="privacy-info">
              <div class="privacy-label">公开邮箱地址</div>
              <div class="privacy-desc">允许其他用户查看您的邮箱地址</div>
            </div>
            <el-switch v-model="privacySettings.showEmail" />
          </div>

          <div class="privacy-item">
            <div class="privacy-info">
              <div class="privacy-label">接收系统通知</div>
              <div class="privacy-desc">接收订单、消息等重要通知</div>
            </div>
            <el-switch v-model="privacySettings.receiveNotifications" />
          </div>

          <div class="privacy-item">
            <div class="privacy-info">
              <div class="privacy-label">接收营销信息</div>
              <div class="privacy-desc">接收活动、优惠等营销推广信息</div>
            </div>
            <el-switch v-model="privacySettings.receivePromotions" />
          </div>
        </div>

        <div class="privacy-actions">
          <el-button type="primary" @click="handleSavePrivacy">
            保存设置
          </el-button>
        </div>
      </div>
    </div>

    <!-- 注销账户 -->
    <div class="settings-section danger-section">
      <div class="section-header">
        <el-icon :size="20" color="#ff6b6b">
          <Delete />
        </el-icon>
        <h4 class="section-title danger-title">危险区域</h4>
      </div>
      <div class="section-content">
        <div class="danger-warning">
          <p class="warning-text">⚠️ 注销账户后，您的所有数据将被永久删除且无法恢复</p>
          <el-button type="danger" plain @click="handleDeleteAccount">
            注销账户
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.account-settings {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(79, 172, 254, 0.1);
}

.settings-header {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f9ff;
}

.settings-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.settings-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* 设置区块 */
.settings-section {
  margin-bottom: 32px;
  padding: 24px;
  background: #fafafa;
  border-radius: 12px;
}

.settings-section:last-child {
  margin-bottom: 0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.section-content {
  padding-left: 32px;
}

/* 绑定信息 */
.bind-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
}

.bind-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.bind-info {
  flex: 1;
}

.bind-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.bind-value {
  font-size: 14px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 隐私设置 */
.privacy-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
}

.privacy-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.privacy-info {
  flex: 1;
}

.privacy-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.privacy-desc {
  font-size: 13px;
  color: var(--text-secondary);
}

.privacy-actions {
  margin-top: 20px;
}

/* 危险区域 */
.danger-section {
  background: #fff5f5;
  border: 2px solid #ffe0e0;
}

.danger-title {
  color: #ff6b6b;
}

.danger-warning {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #ffcccb;
  max-width: 600px;
}

.warning-text {
  font-size: 14px;
  color: #ff6b6b;
  font-weight: 500;
  margin: 0;
}

/* Element Plus样式覆盖 */
:deep(.el-switch.is-checked .el-switch__core) {
  background-color: var(--primary-color);
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  border-radius: 24px;
  font-weight: 600;
}

:deep(.el-button--primary:hover) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 172, 254, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .account-settings {
    padding: 20px;
  }

  .section-content {
    padding-left: 0;
  }

  .bind-item,
  .privacy-item,
  .danger-warning {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .bind-item .el-button,
  .danger-warning .el-button {
    width: 100%;
  }
}
</style>
